<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<select id="province">
  <option value="-1">请选择</option>
  </select>
<select id="city">
  <option value="-1">请选择</option>
</select>
<select id="country">
  <option value="-1">请选择</option>
</select>
</select>


<script>

  var provinceArr = ['湖南','广州',];
  var cityArr = [
    ['长沙市'],
    ['广州市']
  ];

  var countryArr = [
    [
    ['天心区','雨花区','岳麓区']
    ],
   [['天河区','白云区','越秀区']
  ]]
 let province = document.getElementById('province');
  let city = document.getElementById('city');


  for(let i=0;i<provinceArr.length;i++){
    let option = new Option(provinceArr[i],i);
    province.options.add(option);
  }
  province.onchange = function(e){
    console.log(province.value);

    city.options.length= 1;

    let citys = cityArr[province.value];

    for(let i=0;i<citys.length;i++){
      let option = new Option(citys[i],i);
      city.options.add(option);
    }


    city.onchange = function(e) {
      country.options.length = 1;

      let countrys = countryArr[province.value][city.value];

      for (let i = 0; i <countrys.length; i++) {
        let option = new Option(countrys[i], i);
        country.options.add(option);
      }
    }
  }


</script>


</body>
</html>
